<template>
  <div id="app">
    <h4>hello App...</h4>
    <!-- <h3>{{counter}}</h3> -->
    <h3>{{ $store.state.counter }}</h3>
    <!-- 
      @click="counter++" 等价于 () => { counter++ } ,只不过 Vue 底层进行了代码优化
      <button @click="()=> { counter++ }">+</button>
    -->
    <!-- 
       <button @click="counter++">+</button>
       <button @click="counter--">-</button> 
       <hello-vuex :counter="counter"/>
    -->

    <!-- <button @click="$store.state.counter++">+</button>
    <button @click="$store.state.counter--">-</button> -->

    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="incrementByStep(5)">+5</button>
    <button @click="addUser">添加人物</button>
    <button @click="syncModifyUserInfo">同步修改人物信息</button>
    <button @click="asyncModifyUserInfo">异步修改人物信息</button>
    <h3>同步修改人物信息---{{ $store.state.userInfo }}</h3>

    <h3>这里是ModuleA部分...</h3>
    <h4>{{$store.state.ModuleA.status}}</h4>
    <h4>{{$store.state.ModuleA.mingcheng}}</h4>
    <h4>{{$store.getters.fullName}}</h4>
    <h4>{{$store.getters.fullName2}}</h4>
    <h4>{{$store.getters.fullName3}}</h4>
    <button @click="moduleAModifyUserInfo">ModuleA同步修改用户信息</button>
    <button @click="moduleAasyncModifyUserInfo">ModuleA异步修改用户信息</button>
    <hr>

    <h4>对counter求平方...</h4>
    <h4>{{ $store.getters.counterSquare }}</h4>
    <h4>{{ $store.getters.takeOutAgeMore20 }}</h4>
    <h4>{{ $store.getters.getAgeMore20Length }}</h4>
    <h4>{{ $store.getters.accordingToIncomingAge(1) }}</h4>

    <hello-vuex />
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex.vue";
import { INCREMENT } from "./store/mutation-type.js";
export default {
  name: "App",
  components: { HelloVuex },
  data() {
    return {
      //counter: 0
    };
  },
  methods: {
    addition() {
      //this.$store.commit('increment')
      this.$store.commit(INCREMENT);
    },
    subtraction() {
      this.$store.commit("decrement");
    },
    incrementByStep(step) {
      //1. mutations 传递参数的第一种方式
      //this.$store.commit('incrementByStep',step)

      //2. mutations 传递参数的第二种方式
      this.$store.commit({
        type: "incrementByStep",
        step
      });
    },
    addUser() {
      const user = { name: "老了", type: "老年", age: 66 };
      this.$store.commit("pushUsers", user);
    },
    syncModifyUserInfo() {
      // const name = "勒布朗詹姆斯"
      // this.$store.commit('syncUpdateUserInfo',name)

      this.$store.commit("syncUpdateUserInfo");
    },
    asyncModifyUserInfo() {
      //异步,使用 dispatch
      // this.$store.dispatch('asyncUpdateUserInfo',{
      //   message:'我是携带的信息...',
      //   success: ()=>{
      //     console.log("请求已经完成了...");
      //   }
      // })

      this.$store
        .dispatch("asyncUpdateUserInfo", "我是携带的信息...")
        .then(res => {
          console.log("里面完成了提交...");
          console.log(res);
        });
    },
    moduleAModifyUserInfo(){
      this.$store.commit('ModuleAUpdateUserInfo','ModuleA Name Updated...')
    },
    moduleAasyncModifyUserInfo(){
      this.$store.dispatch('moduleAasyncUpdateUserInfo','ModuleA Name Async Updated...')
    }
  }
};
</script>

<style></style>
